// 属性绑定指令
<template>
  <div class="test2">
    <h3>属性绑定指令</h3>
    <div>v-bind演示：</div>
    <!-- v-bind：属性绑定指令。为元素的属性动态绑定属性值 -->
    <!-- v-bind:指令可简写为: 所以实际开发中属性绑定指令都会用: -->
    <input type="text" v-bind:placeholder="placeholder" />
    <img :src="logo" style="width: 50px" />
    <hr />
  </div>
</template>

<style lang="scss">
.test2 {
  color: black;
  h3 {
    color: red;
  }
  div {
    color: blue;
  }
}
</style>

<script>
import logo from "@/assets/logo.png";

export default {
  name: "Test2",
  // data对象是要渲染到页面上的数据
  data() {
    return {
      placeholder: "请输入内容",
      logo,
    };
  },
};
</script>
